<template>
    <!-- 商家入驻 -->
    <div class="container">
        <div class="banner-img">
            <el-image class="img" :src="banner">
                <div slot="placeholder">
                    加载中<span class="dot">...</span>
                </div>
            </el-image>
        </div>
        <div class="content">
            <div class="small-title">
                <div></div>
                <span>注册信息</span>
            </div>
            <div class="children">
                <div class="des">
                    <div class="title color-gray">入驻优势</div>
                </div>
                <div class="step">
                    <div>
                        <div class="column">
                            <i class="icon-step"></i>
                            <span class="color-gray">流量精准</span>
                        </div>
                        <div class="column">
                            <i class="icon-step"></i>
                            <span class="color-gray">低成本高效率</span>
                        </div>
                        <div class="column">
                            <i class="icon-step"></i>
                            <span class="color-gray">数据共享</span>
                        </div>
                    </div>
                </div>
                <div class="des">
                    <div class="title color-gray">入驻流程</div>
                </div>
                <div class="flow">
                    <div class="color-gray font-18">1.申请成为合作商并提交您的资质材料；</div>
                    <div class="color-gray font-18">2.资质审核，并在7个工作日反馈审核结果;</div>
                    <div class="color-gray font-18">3.签订合作协议，加入平台;</div>
                </div>
                <div class="des">
                    <div class="title color-gray">合作说明</div>
                </div>
                <div class="team-des color-gray font-18">
                    成为居家商城合作商，您将可以自主上线产品，自主定价，顾客通过途平台预定产品，由您的客服完成售前、售中、售后一系列的对客服务，平台将按合同约定周期定期与您结算。
                </div>
                <div class="des">
                    <div class="title color-gray">招商热线</div>
                </div>
                <div class="hot">
                    <div>
                        <i class="icon-tel"></i>
                        <span class="color-gray font-18">联系电话：0755-88888888</span>
                    </div>
                    <div>
                        <i class="icon-email"></i>
                        <span class="color-gray font-18">邮箱地址：wmjl@163.com</span>
                    </div>
                </div>
            </div>
            <el-form :model="value" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <div class="small-title">
                    <div></div>
                    <span>联系人信息</span>
                </div>
                <div class="children">
                    <el-form-item label="姓名：" prop="contactName">
                        <el-input v-model="value.contactName" :style="{ width: '380px' }"></el-input>
                    </el-form-item>
                    <el-form-item label="手机：" prop="contactMobile">
                        <el-input v-model.number="value.contactMobile" :style="{ width: '380px' }" maxlength="11" ></el-input>
                    </el-form-item>
                    <el-form-item label="固定电话：" prop="supportPhone">
                        <el-input v-model="value.supportPhone" :style="{ width: '380px' }" placeholder="号码格式：XXXX-XXXXXXXX" ></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱：" prop="contactEmail">
                        <el-input v-model="value.contactEmail" :style="{ width: '380px' }"></el-input>
                    </el-form-item>
                </div>
                <div class="small-title">
                    <div></div>
                    <span>公司信息</span>
                </div>
                <div class="children">
                    <el-form-item label="品牌：" prop="brandName">
                        <el-input v-model="value.brandName" :style="{ width: '380px' }"></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称：" prop="name">
                        <el-input v-model="value.name" :style="{ width: '380px' }"></el-input>
                    </el-form-item>
                    <el-form-item label="公司地址：" prop="companyAddress">
                        <el-input v-model="value.companyAddress" :style="{ width: '380px' }"></el-input>
                    </el-form-item>
                    <el-form-item label="经营范围：" prop="businessScope">
                        <el-input v-model="value.businessScope" :style="{ width: '380px' }"></el-input>
                    </el-form-item>
                    <el-form-item label="合作产品说明：" prop="description">
                        <el-input type="textarea" v-model="value.description" :style="{ width: '380px' }"
                            :rows="4" resize="none" placeholder="请填写公司主要产品线和优势产品，限100字" maxlength="100"></el-input>
                    </el-form-item>
                </div>
                <div class="small-title">
                    <div></div>
                    <span>资质信息</span>
                </div>
                <div class="children">
                    <el-form-item label="营业执照号：" prop="businessLicenseNo">
                        <el-input v-model.number="value.businessLicenseNo" :style="{ width: '380px' }"></el-input>
                    </el-form-item>
                    <el-form-item label="" class="photo" :style="{ width: '1200px' }">
                        <el-col :span="8">
                            <multi-upload v-model="value.supportName" :maxCount="1" :bgImage='permitImage'></multi-upload>
                        </el-col>
                        <el-col :span="8">
                            <multi-upload v-model="value.idCardFront" :maxCount="1" :bgImage='idzImage'></multi-upload>
                        </el-col>
                        <el-col :span="8">
                            <multi-upload v-model="value.idCardReverse" :maxCount="1" :bgImage='idfImage'></multi-upload>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="企业LOGO：" class="logo" prop="logo">
                        <el-col :span="24">
                            <multi-upload v-model="value.logo" :maxCount="1" :bgImage='logoImage'></multi-upload>
                        </el-col>
                    </el-form-item>
                </div>
                <el-form-item class="button" style="text-align: center">
                    <el-button type="primary" @click="handleCommit">提交信息</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import MultiUpload from '@/components/Upload/multiUpload'
import {createStore} from '@/api/sys/store'
export default {
    data() {
        return {
            banner: require('@/assets/images/rbanner.png'),
            defaultData: {
                contactName: '',
                contactMobile: '', 
                supportPhone: '', 
                contactEmail: '',
                brandName: '', 
                name: '',
                companyAddress: '',
                businessScope: '',
                description: '',
                businessLicenseNo: '',
                supportName: [],
                idCardFront: [],
                idCardReverse: [],
                logo: [],
            },
            value: {},
            permitImage: require('@/assets/images/yyzz.png'),
            idzImage: require('@/assets/images/idz.png'),
            idfImage: require('@/assets/images/idf.png'),
            logoImage: require('@/assets/images/qiyel.png'),
            rules: {
                contactName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
                contactMobile: [{required: true,  message: '请输入正确的11位手机号码', trigger: 'blur'}],
                supportPhone: [{required: true, pattern: /^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$/, message: '请输入正确的固定电话', trigger: 'blur'}],
                contactEmail: [{required: true, pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱格式', trigger: 'blur'}],
                brandName: [{ required: true, message: '请输入品牌', trigger: 'blur' }],
                name: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
                companyAddress: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
                businessScope: [{ required: true, message: '请输入经营范围', trigger: 'blur' }],
                description: [{ required: true, message: '请输入合作产品说明', trigger: 'blur' }],
                businessLicenseNo: [{ required: true, message: '请输入营业执照号', trigger: 'blur' }],
                logo: [{ required: true, message: '请选择企业LOGO', trigger: 'blur' }],
            }
        }
    },
    created() {
       this.value = Object.assign({}, this.defaultData)
    },
    methods: {
        // 提交
        handleCommit() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let msg = ''
                    let flag = false
                    if(this.value.contactMobile.toString().length !== 11) {
                        msg = '请输入正确的11位手机号码'
                        flag = true
                    }else if(this.value.supportName.length === 0) {
                        msg = '请添加营业执照'
                        flag = true
                    }else if(this.value.idCardFront.length === 0) {
                        msg = '请添加身份证正面照'
                        flag = true
                    }else if(this.value.idCardReverse.length === 0) {
                        msg = '请添加身份证反面照'
                        flag = true
                    }else if(this.value.logo.length === 0) {
                        msg = '请添加企业LOGO'
                        flag = true
                    }
                    if(flag) {
                        this.$message({
                            message: msg,
                            type: 'error',
                            duration:1000
                        })
                    }else {// 处理数据
                        let params = Object.assign({}, this.value)
                        params.supportName = this.value.supportName.toString()
                        params.idCardFront = this.value.idCardFront.toString()
                        params.idCardReverse = this.value.idCardReverse.toString()
                        params.logo = this.value.logo.toString()
                        createStore(params).then(response => {
                            if(response.code==200){
                                this.value = Object.assign({}, this.defaultData)
                                this.$message({
                                    message: '提交成功',
                                    type: 'success',
                                    duration: 1000
                                });
                                this.$router.push({path: '/merchantsSuccee'})
                            }else{
                                this.$message({
                                    message: response.msg,
                                    type: 'error',
                                    duration:1000
                                });

                            }
                        })
                    }
                } else {
                    this.$message({
                        message: '验证失败',
                        type: 'error',
                        duration:1000
                    });
                    return false
                }
            });
        }
    },
    components: {
        MultiUpload
    },
}
</script>

<style scoped>
.color-gray {
    color: #4F5C73;
}
.font-18 {
    font-size: 18px;
}
.container {
    min-width: 1336px;
    height: 100%;
    background-color: #EEEEEE;
}
.banner-img {
    width: 100%;
    height: 390px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner-img>.img {
    width: 1336px;
    height: 390px;
}
.small-title {
    display: flex;
    align-items: center;
    margin: 8px 0 20px;
}
.small-title>div {
    width: 4px;
    height: 24px;
    background-color: #4787F8;
    border-radius: 0px 2px 2px 0px;
    margin-right: 12px;
}
.content {
    overflow: hidden;
    margin: 0 auto;
    width: 1336px;
    padding: 0 24px;
    background-color: #fff;
}
.children {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}
.small-title>span {
    color: #666;
    font-size: 16px;
}
.des>.title {
    position: relative;
    font-size: 24px;
    margin-bottom: 50px;
}
.des>.title::after {
    position: absolute;
    content: '';
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    bottom: -8px;
    width: 50px;
    height: 4px;
    background-color: #4F5C73;
    border-radius: 2px;
}
.step {
    position: relative;
    width: 457px;
    height: 74px;
    margin-bottom: 80px;
}
.step::after {
    position: absolute;
    display: inline-block;
    content: '';
    left: 50%;
    transform: translateX(-50%);
    top: 16px;
    width: 350px;
    height: 4px;
    background-color: #CCD2DC;
    z-index: 0;
}
.step>div {
    position: absolute;
    display: flex;
    justify-content: space-between;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.step .column {
    height: 74px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
}
.icon-step,
.icon-tel,
.icon-email {
    vertical-align: bottom;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.icon-step {
    width: 36px;
    height: 36px;
    background-image: url('../../../src/assets/images/iconstep.png');
}
.icon-tel {
    width: 20px;
    height: 28px;
    background-image: url('../../../src/assets/images/icontel.png');
}
.icon-email {
    width: 26px;
    height: 22px;
    background-image: url('../../../src/assets/images/iconemail.png');
}
.flow {
    margin-bottom: 80px;
    width: 350px;
}
.flow>div:not(:last-child) {
    margin-bottom: 16px;
}
.team-des {
    width: 730px;
    line-height: 32px;
    margin-bottom: 80px;
}
.hot {
    width: 670px;
    height: 32px;
}
.hot>div {
    display: inline-block;
}
.hot>div:first-child {
    margin-right: 160px;
}
.hot>div>span:first-child {
    margin-right: 10px;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.photo,
.logo {
    height: 137px;
    overflow: hidden;
}
.photo>>>.el-form-item__content {
    margin-left: 470px !important;
}
.logo {
    margin-left: -160px !important;
}
.logo>>>.el-form-item__content {
    width: 223px;
    height: 137px;
}
.button {
    margin-bottom: 60px;
}
.photo>>>.el-upload-list__item,
.logo>>>.el-upload-list__item,
.photo>>>.el-upload--picture-card,
.logo>>>.el-upload--picture-card {
    width: 223px;
    height: 137px;
}
.photo>>>.el-icon-bg,
.logo>>>.el-icon-bg {
    width: 221px;
    height: 135px;
}
.photo>>>.el-upload-list__item-thumbnail,
.logo>>>.el-upload-list__item-thumbnail {
    height: auto;
}
.photo>>>.el-upload-list__item,
.logo>>>.el-upload-list__item {
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo>>>.el-upload--picture-card,
.logo>>>.el-upload--picture-card {
    border-radius: 12px;
}
</style>